/** 2021-3-4 播放单个普通视频页面 自定义播放控件 */

$(function () {
    /** 
     * #isplay ： 暂停播放按钮
     */
    var video = document.getElementById("video");
    var playBtn = $("#isplay");
    var timer = null;
    var contentBox = $("#contentBox");
    var currentTime = null;
    var duration = null;
    playBtn.on('touchstart', function (e) {
        e.preventDefault();
        e.stopPropagation();
        PauseorPlay();
    });
    var i = 0;
    $(video).unbind("click").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        i++;
        timer = setTimeout(function () {
            showOpts();
            i = 0;
        }, 500);
        if (i > 1) {
            PauseorPlay();
            clearTimeout(timer);
            i = 0;
        }
    })
    $(video).unbind('play').bind('play', function () {
        // $("section").removeClass("dn");
        // setTimeout(function () {
        //     $("section").addClass("dn");
        // }, 5000)
    })
    /**  @loadedmetadata : 视频加载后执行，获取视频长度赋值给总时间
     *  @timeupdate：视频每更新一次，就对应更新currenTime
     */
    $(video).on('loadedmetadata', function () {
        duration = video.duration;
        console.log("视频总时长：" + video.duration);
        // 视频刚加载出画面后
        $('#endTime').text(formatterTimer(video.duration));
    });
    $(video).on('timeupdate', function () {
        currentTime = video.currentTime;
        duration = video.duration;
        var percent = currentTime / duration * 100;
        $("#progress div").css("width", percent + "%");
        $("#progress div span").css("left", "99%");
        $('#currenTime').text(formatterTimer(currentTime));
        if (currentTime >= duration) { //当播放到暂停时，将播放停止图标改过来
            video.pause();
            playBtn.removeClass("active");
        }
    });
    $("#progress").click(function (e) {
        e.preventDefault();
        let totalWid = $(this).width();
        let clickWid = e.offsetX;
        let precent = clickWid / totalWid * 100;
        video.currentTime = precent / 100 * video.duration;
        console.log(precent / 100 * video.duration);
        $("#progress div").css("width", precent + "%");
        video.play(); //每次点击快进都会播放
        playBtn.addClass("active");
    });
    /** @PauseorPlay ：控制播放暂停    @longTouch ：长按事件
     *  @timer：时长格式化 00:00格式   @showOpts:控制控件显示隐藏
     */
    function PauseorPlay() { // 播放或暂停
        let isplay = video.paused; //true暂停中   false播放中
        console.log(isplay);
        if (isplay) {
            video.play();
            playBtn.addClass("active");
        } else {
            video.pause();
            playBtn.removeClass("active");
        }
    }

    function showOpts() {
        let bool = $("section").hasClass("dn");
        if (bool) { //true证明被隐藏了
            $("section").removeClass("dn");
            setTimeout(function () {
                $("section").addClass("dn");
            }, 5000)
        } else {
            $("section").addClass("dn");
        }
    }
    //时间格式化  00 ： 00            
    function formatterTimer(seconds) {
        var minute = Math.floor(seconds / 60);
        if (minute < 10) {
            minute = "0" + minute;
        }
        var second = Math.floor(seconds % 60);
        if (second < 10) {
            second = "0" + second;
        }
        return minute + ":" + second;
    }

    function longTouch(ele, fuc) {
        var timeOutEvent = null;
        var startPoint = ""; //触摸起点
        var endPoint = ""; //触摸终点
        var moveDistance = ""; //滑动距离
        let vidWidth = $(video).width();
        let vidHei = $(video).height();
        $(ele).on({
            //手指开始按时设置定时器，超过500毫秒就执行longPress()
            touchstart: function (e) {
                e.preventDefault();
                e.stopPropagation();
                let ev = e.originalEvent.changedTouches[0];
                startPoint = ev.pageX;
                console.log(startPoint);
                console.log(ev);
                timeOutEvent = setTimeout(function () {
                    // fuc();
                    clearTimeout(timeOutEvent);
                    timeOutEvent = 0;
                }, 500);
            },
            //如果手指滑动只是说明用户不想长按只想滑动，所以要取消定时器,并还原，
            //如果不还原的话，返回的定时器的值都会是不同的
            touchmove: function (e) {
                e.preventDefault();
                e.stopPropagation();
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
            },
            //长按没有超过500毫秒，手指离开，执行点击事件，取消定时器
            touchend: function (event) {
                event.preventDefault();
                event.stopPropagation();
                clearTimeout(timeOutEvent);
                let ev = event.originalEvent.changedTouches[0];
                endPoint = ev.pageX;
                moveDistance = endPoint - startPoint;
                let vid = vidHei > vidWidth ? vidHei : vidWidth; //获得最长的边
                console.log(vid);
                console.log(endPoint, moveDistance);
                console.log(moveDistance / vid * "100" + "%");
                if (timeOutEvent != 0) {
                    //执行点击事件的行为
                    console.log("你这是点击，不是长按");
                }
                return false;
            }
        })
    }

})